@page "/Menu"

@using FluentUI.Demo.Shared.Pages.Menu.Examples

<h1>Menu</h1>

<p>As defined by the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/menubar/" target="_blank" rel="noreferrer">W3C</a>:</p>
<blockquote>
    <p>
        A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. Menu widgets behave like native
        operating system menus, such as the menus that pull down from the menubars commonly found at the top of many desktop application windows.
        A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking
        a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually
        closes unless the choice opened a submenu.
    </p>
</blockquote>
<p>
    While any DOM content is permissible as a child of the menu, only <code>&lt;FluentMenuItem&gt;</code>'s and slotted content with a role of
    <code>menuitem</code>, <code>menuitemcheckbox</code>, or <code>menuitemradio</code> will receive keyboard support.
</p>
<p>
    <code>&lt;FluentMenu&gt;</code> applies <code>&lt;FluentMenuItem&gt;</code>'s <code>startColumnCount</code> property based on an evaluation of all
    of the <code>&lt;FluentMenuItem&gt;</code> so the content text vertically aligns across all <code>&lt;FluentMenuItem&gt;</code>. If any
    <code>&lt;FluentMenuItem&gt;</code> does not have a roll of <code>checkbox</code> or <code>radio</code> or the <code>start</code> slot is not
    passed, <code>startColumnCount</code> is set to 0 which applies a <code>indent-0</code> class to all the <code>&lt;FluentMenuItem&gt;</code>s.
    If any <code>&lt;FluentMenuItem&gt;</code> has a roll of <code>checkbox</code> or <code>radio</code> or the <code>start</code> slot exists,
    <code>startColumnCount</code> is set to 1 which applies a <code>indent-1</code> class to all the <code>&lt;FluentMenuItem&gt</code>s. Or if any
    <code>&lt;FluentMenuItem&gt;</code> has a roll of <code>checkbox</code> or <code>radio</code> and the <code>start</code> slot exists,
    <code>startColumnCount</code> is set to 2 which applies a <code>indent-2</code> class to all the <code>&lt;FluentMenuItem&gt;</code>s.
</p>
<p>
    <code>&lt;FluentMenu&gt;</code> wraps the <code>&lt;fluent-menu&gt;</code> element, a web component implementation of a menu leveraging the
    Fluent UI design system.
</p>

<h2 id="example">Example</h2>

<DemoSection Title="Default" Component="@typeof(SimpleMenuExample)"></DemoSection>

<DemoSection Title="Simple context menu" Component="@typeof(ContextMenuExample)"></DemoSection>

<DemoSection Title="Default menu" Component="@typeof(MenuDefault)"></DemoSection>

<DemoSection Title="With Separator" Component="@typeof(MenuSeparator)"></DemoSection>

<DemoSection Title="With radio buttons and checkboxes" Component="@typeof(MenuCheckRadio)"></DemoSection>

<DemoSection Title="Nested" Component="@typeof(MenuNested)"></DemoSection>

<DemoSection Title="With icons" Component="@typeof(MenuIcon)">
    <Description>
            <p>
                When using <code>FluentIcon</code>s in a <code>FluentMenuItem</code>, you will run into issues with indentation when putting the icons in slots.
                This problem originates from the following: (from <a href="https://www.fast.design/docs/components/menu#setup" rel="nofollow">https://www.fast.design/docs/components/menu#setup</a>):</p>
            <blockquote>
                <p>
                    <code>fast-menu</code> applies <code>fast-menu-item</code>'s <code>startColumnCount</code> property based on an evaluation 
                    of all of the <code>fast-menu-items</code> so the content text vertically aligns across all <code>fast-menu-items</code>. 
                    If any <code>fast-menu-item</code> does not have a roll of <code>checkbox</code> or <code>radio</code> or the 
                    <code>start</code> slot is not passed, <code>startColumnCount</code> is set to 0 which applies a <code>indent-0</code> class 
                    to all the <code>fast-menu-item</code>s. If any <code>fast-menu-item</code> has a roll of <code>checkbox</code> or 
                    <code>radio</code> or the <code>start</code> slot exists, <code>startColumnCount</code> is set to 1 which applies a 
                    <code>indent-1</code> class to all the <code>fast-menu-item</code>s. Or if any <code>fast-menu-item</code> has a roll of 
                    <code>checkbox</code> or <code>radio</code> and the <code>start</code> slot exists, <code>startColumnCount</code> is set to 
                    2 which applies a <code>indent-2</code> class to all the <code>fast-menu-item</code>s.
                </p>
            </blockquote>
            <p>
                Because we are rendering the web components indirectly <code>fast-menu</code> doesn't know about the icons and their slots in the 
                <code>fast-menu-items</code> when it renders (they don't exist in the DOM yet) so it can't determine the <code>startColumnCount</code>.
            </p>
            <p>
                As a workaround, place the <code>FluentIcons</code> inside a <code>&lt;span slot="start"&gt;&lt;/span&gt;</code> 
                (or <code>&lt;span slot="end"&gt;&lt;/span</code>&gt; in the menu items. For example:
            </p>
            <CodeSnippet>&lt;FluentMenu&gt;
    &lt;FluentMenuItem&gt;
        Menu item 1
        &lt;span slot="start" &gt;
            &lt;FluentIcon Icon="Icons.Regular.Size16.Globe" Slot="start" Color="Color.Neutral" /&gt;
        &lt;/span&gt;
        &lt;span slot="end"&gt;
            &lt;FluentIcon Icon="Icons.Regular.Size16.Globe" Slot="end" Color="Color.Neutral" /&gt;
        &lt;/span&gt;
    &lt;/FluentMenuItem&gt;
    :
    :</CodeSnippet>
            <p>
                The script gets triggered then and the icons render in the right place. You can leave the <code>Slot</code> parameter in 
                the <code>FluentIcon</code> but in this case it doesn't have to be there anymore.
            </p>
    </Description>
</DemoSection>

<DemoSection Title="With standard elements" Component="@typeof(MenuStandardElements)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentMenuItem)" />

<ApiDocumentation Component="typeof(FluentMenu)" />
